{% extends 'base.html' %} 
{% block content %}
    <div class="column">
        <form method="post" action="{{ url_for('dashboard') }}">
            <div class="form-group">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <label class="form-label" for="url">
                        Ссылка
                </label>
                <input 
                    class="form-input"
                    type="text" 
                    name="url" 
                    id="url" 
                    placeholder="https://длинная-длинная-ссылка.ru" 
                    value="{{ request.form.get('url', '') }}" 
                    autofocus>
                <label class="form-switch">
                    <input 
                    type="checkbox" 
                    name="custom_on" 
                    id="custom_on"
                    onclick="hideCustomId()"
                    {{ 'checked' if request.form['custom_on'] else '' }}>
                    <i class="form-icon"></i>
                    Указать имя ярлыка
                </label>
                <input 
                    class="form-input" 
                    type="text" 
                    name="custom" 
                    id="custom" 
                    placeholder="введите желаемое имя ярлыка"
                    value="{{ request.form.get('custom', '') }}">
                <label class="form-switch">
                    <input 
                        type="checkbox" 
                        name="password_on" 
                        id="password_on"
                        onclick="hidePassword()"
                        {{ 'checked' if request.form['password_on'] else '' }}>
                    <i class="form-icon"></i>
                    Установить пароль
                </label>
                <input 
                    class="form-input" 
                    type="password" 
                    name="password" 
                    id="password" 
                    placeholder="введите пароль">
            </div>
            <div class="form-group">
                <button 
                    class="btn btn-primary" 
                    type="submit" 
                    name="action">
                    Сократить
                </button>
            </div>
        </form>
    </div>
    <br> 
    {% if shortcuts %}
    <div class="column">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Ярлык</th>
                    <th>Создан</th>
                    <th>Переходов</th>
                    <th>Последний</th>
                    <th>Пароль</th>
                    <th>Действия</th>
                </tr>
            </thead>
            <tbody>
                {% for shortcut in shortcuts %}
                    <tr>
                        <th>
                            <div class="popover popover-bottom">
                                <a href="{{ shortcut.url }}" target="_blank" role="button">
                                    {{ shortcut.shortcut_id }}
                                </a>
                                <div class="popover-container">
                                    <div class="card">
                                        <div class="card-body">
                                            {{ shortcut.url }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </th>
                        <th>
                            {{ shortcut.created | datetime }}
                        </th>
                        <th>
                            {{ shortcut.visits }}
                        </th>
                        <th>
                            {{ shortcut.last_visited | datetime }}
                        </th>
                        <th>
                            {% if shortcut.password_hash %}
                                <i class="icon icon-check text-success"></i>
                            {% else %}
                                <i class="icon icon-cross text-warning"></i>
                            {% endif %}
                        </th>
                        <th>
                            <div class="popover popover-bottom">
                                <button class="btn btn-link" onclick="handleCopyToClipboard('{{ url_for('redirect_url', shortcut_id=shortcut.shortcut_id, _external=True) }}')">
                                    <i class="icon icon-copy text-primary"></i>
                                </button>
                                <div class="popover-container">
                                    <div class="card">
                                        <div class="card-body">
                                            Копировать
                                        </div>
                                    </div>
                                </div>
                            </div>&nbsp;
                            <div class="popover popover-bottom">
                                <button class="btn btn-link" onclick="handleTransition('{{ url_for('get_qr', shortcut_id=shortcut.shortcut_id, _external=True) }}', '_blank')">
                                    <i class="icon icon-apps text-primary"></i>
                                </button>
                                <div class="popover-container">
                                    <div class="card">
                                        <div class="card-body">
                                            QR-код
                                        </div>
                                    </div>
                                </div>
                            </div>&nbsp;
                            <div class="popover popover-bottom">
                                {% if shortcut.is_active %}
                                <button class="btn btn-link" onclick="handleConfirmTransition('{{ url_for('switch', shortcut_id=shortcut.shortcut_id) }}', 'Деактивировать ссылку?')">
                                    <i class="icon icon-shutdown text-warning"></i>
                                </button>
                                <div class="popover-container">
                                    <div class="card">
                                        <div class="card-body">
                                            Деактивировать
                                        </div>
                                    </div>
                                </div>
                                {% else %}
                                <button class="btn btn-link" onclick="handleConfirmTransition('{{ url_for('switch', shortcut_id=shortcut.shortcut_id) }}', 'Активировать ссылку?')">
                                    <i class="icon icon-refresh text-success"></i>
                                </button>
                                <div class="popover-container">
                                    <div class="card">
                                        <div class="card-body">
                                            Активировать
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                            </div>&nbsp;
                            <div class="popover popover-bottom">
                                <button class="btn btn-link" onclick="handleConfirmTransition('{{ url_for('delete', shortcut_id=shortcut.shortcut_id) }}', 'Удалить ссылку?')">
                                    <i class="icon icon-delete text-error"></i>
                                </button>
                                <div class="popover-container">
                                    <div class="card">
                                        <div class="card-body">
                                            Удалить
                                        </div>
                                    </div>
                                </div>
                            </div>&nbsp;
                        </th>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="column col-3 p-centered">
        {% include '_pagination.html' %}
    </div>
    
    {% endif %}
    <script src="{{ url_for('static', filename='js/checkboxhide.js') }}"></script>
    <script src="{{ url_for('static', filename='js/button_events.js') }}"></script>
{% endblock %}